<template>
  <div>
    <vo-table ref="yuTable" :data="data.tableData.data" :cols="data.tableData.cols" @fetch-data="filterData" @vue:mounted="filterData">

      <template #tableForm>
          <tiny-form :model="data.formData"  :inline="true"  style="height: 40px;" label-width="100px"  ref="formRef">
            <tiny-form-item label="规则名称" >
              <tiny-input v-model="data.ruleSet.ruleName" placeholder="规则名称"></tiny-input>
            </tiny-form-item>
            <tiny-form-item >
            <tiny-button  size="small"  type="info" @click="filterData"  ><vo-icon iconName="search"/>搜索</tiny-button>
            </tiny-form-item>
        </tiny-form>
      </template>
      <template #leftBar>
        <tiny-button-group>
          <tiny-button  type="success" plain size="small" @click="addRule"> <vo-icon iconName="plus1"/>新增</tiny-button>
          <tiny-button  type="danger" plain size="small" @click="delBatch"><vo-icon iconName="delete"/>删除</tiny-button>
        </tiny-button-group>
      </template>

      <template v-slot:ruleStuts="{row}">
        <el-switch v-model="row.isStop" class="tablescope" @change="changeIsStop($event, row)" active-value="0" inactive-value="1" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
      </template>

      <template v-slot:handleSlot="{row}">
        <tiny-button-group size="mini">
          <tiny-button size="mini" plain  type="success"  @click="editBtn(row)"><vo-icon iconName="edit" size="12px"/>编辑</tiny-button>
          <tiny-button size="mini" plain type="danger"  @click="delRuleSet(row)"><vo-icon iconName="delete" size="12px" />删除 </tiny-button>
        </tiny-button-group>
      </template>
    </vo-table>
    <vo-dialog :data="data.dialogConfig" v-model:isShow="data.isShow">
      <sys-rule-edit :editData="data.editData" v-model:isShow="data.isShow" />
    </vo-dialog>
  </div>
</template>

<script setup>
  import {reactive, ref, getCurrentInstance, onMounted} from 'vue';
  import SysRuleEdit from './SysRuleEdit.vue';
  import {Modal, Notify} from '@opentiny/vue';
  const {proxy} = getCurrentInstance();
  const data = reactive({ruleSet: {ruleName: ''}, dialogConfig: {width: '60%', title: '',appendToBody:"true"}, editData: {}, isShow: false, tableData: {data: [], cols: [], tableArrts: {}}});

  const dialogConfig = reactive({title: ''});

  const yuTable = ref(null);

  data.tableData.cols = [
    {type: 'selection'},
    {title: '名称', key: 'ruleName', width: 120, align: 'left', tooltip: true},
    {title: '数据来源', key: 'rootSource', align: 'left'},
    {title: '搜索地址', key: 'rootSearch', align: 'left', tooltip: true},
    {title: '规则类型', key: 'ruleType', align: 'left', tooltip: true, edit: {editor: false, type: 'select', attrs: {}}, dictCode: 'ruleType'},
    {title: '是否停用', key: 'isStop', tooltip: true, align: 'center', slot: 'ruleStuts', width: 100},
    {title: '操作', slot: 'handleSlot', width: 200},
  ];

  const filterData = async () => {
    let params = data.ruleSet;
    var page = {page:yuTable.value.page()};
    params = Object.assign({}, params,page);
    proxy.$api.rule.queryRule(params).then(res => {
      console.log(res);
      data.tableData.data = res;
    });
  };

  const changeIsStop = async (value, row) => {};
  const addRule = async () => {
    data.isShow = true;
    data.dialogConfig.height = '630px';
    data.dialogConfig.title = '新增规则';
    data.editData = {};
  };
  const editBtn = async row => {
    data.isShow = true;
    data.dialogConfig.title = '修改规则';
    data.dialogConfig.height = '630px';
    data.editData = JSON.parse(JSON.stringify(row));
  };
  const delBatch = () => {
    var selectRows = yuTable.value.grid().getSelectRecords(true);
    if (selectRows.length > 0) {
      Modal.confirm('此操作将永久删除该数据, 是否继续?').then(res => {
        if (res == 'confirm') {
          proxy.$api.rule.delSysRule(selectRows).then(res => {
            if (res.code != -1) {
              Modal.message({status: 'success', message: res.msg});
              yuTable.value.grid().remove(selectRows);
            } else {
              Modal.message({status: 'error', message: res.msg});
            }
          });
        }
      });
    } else {
      Modal.message({status: 'warning', message: '请选择数据'});
    }
  };
  const delRuleSet = row => {
    Modal.confirm('此操作将永久删除该数据, 是否继续?').then(res => {
      if (res == 'confirm') {
        let data = [];
        data.push(row);
        proxy.$api.rule.delSysRule(data).then(res => {
          if (res.code != -1) {
            Modal.message({status: 'success', message: res.msg});
            yuTable.value.grid().remove(row);
          } else {
            Modal.message({status: 'error', message: res.msg});
          }
        });
      }
    });
  };
</script>
<style lang="scss" scoped></style>
